<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Context Menu on DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Context Menu on DataGrid</h2>
<p>Right click on the header of DataGrid to display context menu.</p>
<div style="margin:20px 0;"></div>
<table id="dg"></table>
<script type="text/javascript">
	(function ($) {
		function buildMenu(target) {
			var state = $(target).data('datagrid');
			if (!state.columnMenu) {
				state.columnMenu = $('<div></div>').appendTo('body');
				state.columnMenu.menu({
					onClick: function (item) {
						if (item.iconCls == 'tree-checkbox1') {
							$(target).datagrid('hideColumn', item.name);
							$(this).menu('setIcon', {
								target: item.target,
								iconCls: 'tree-checkbox0'
							});
						} else {
							$(target).datagrid('showColumn', item.name);
							$(this).menu('setIcon', {
								target: item.target,
								iconCls: 'tree-checkbox1'
							});
						}
					}
				})
				var fields = $(target).datagrid('getColumnFields', true).concat($(target).datagrid('getColumnFields', false));
				for (var i = 0; i < fields.length; i++) {
					var field = fields[i];
					var col = $(target).datagrid('getColumnOption', field);
					state.columnMenu.menu('appendItem', {
						text: col.title,
						name: field,
						iconCls: 'tree-checkbox1'
					});
				}
			}
			return state.columnMenu;
		}

		$.extend($.fn.datagrid.methods, {
			columnMenu: function (jq) {
				return buildMenu(jq[0]);
			}
		});
	})(jQuery);

	$(function () {
		$('#dg').datagrid({
			url: 'datagrid_data1.json',
			method: 'get',
			title: 'Context Menu on DataGrid',
			iconCls: 'icon-save',
			width: 700,
			height: 250,
			fitColumns: true,
			singleSelect: true,
			columns: [[
				{field: 'itemid', title: 'Item ID', width: 80},
				{field: 'productid', title: 'Product ID', width: 120},
				{field: 'listprice', title: 'List Price', width: 80, align: 'right'},
				{field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right'},
				{field: 'attr1', title: 'Attribute', width: 250},
				{field: 'status', title: 'Status', width: 60, align: 'center'}
			]],
			onHeaderContextMenu: function (e, field) {
				e.preventDefault();
				$(this).datagrid('columnMenu').menu('show', {
					left: e.pageX,
					top: e.pageY
				});
			}
		});
	});
</script>
</body>
</html>